<template>
  <div class="box">
    <div class="left">
      <div class="left-item">
        <p class="title">市总池</p>
        <div class="hour">5405405.4<span>小时</span></div>
      </div>
      <div class="left-item">
        <p class="title">服务对象累计消耗</p>
        <div class="hour">{{ serviceObj_consume || '0' }} <span>小时</span></div>
      </div>
      <div class="left-item">
        <p class="title">市总池余额</p>
        <div class="hour">{{ serviceObj_consume ? (5405405.4 - serviceObj_consume).toFixed(2) : '0' }} <span>小时</span></div>
      </div>
    </div>
    <div class="map">
      <div class="mapTitle">志愿者分布热力图</div>
      <MapMain api="timebank_volunteerNum" :onlyMap="true"></MapMain>
    </div>
    <div class="right">
      <div class="right-top">
        <div class="population">志愿者注册人数：<span>{{ registerNum?.volunteer_num || '0' }}</span>人</div>
        <div class="population">服务对象注册人数：<span>{{ registerNum?.oldman_num || '0' }}</span>人</div>
        <div class="population">订单数：<span>{{ registerNum?.order_num || '0' }}</span>单</div>
      </div>
      <div class="charts">
        <div class="boxBg" style="width: 428px;">
          <p class="text-title-label">志愿者审核状态</p>
          <div style="width: 100%;height: 90%;">
            <volunteerChart :key="chartKey" :xData="xData" :numData="numData"></volunteerChart>
          </div>
        </div>
        <div class="boxBg flex1">
          <p class="text-title-label">服务对象分类</p>
          <oldmanChart :key="chartKey1" :dataX="dataX" :dataY="dataY"></oldmanChart>
        </div>
        <div class="boxBg flex1" style="position: relative;">
          <p class="text-title-label">订单类型占比</p>
          <div class="orderChart">
            <PieChart :key="chartKey2" :data="orderType"></PieChart>
            <div class="text-content">
              <p class="text-value">{{ registerNum?.order_num || '0' }}</p>
              <p class="text-label">订单总数</p>
            </div>
            <div class="legend">
              <div v-for="(item,index) in orderType" :key="index" class="legend-item">
                <div class="flag" :style="{backgroundColor: status[item.name]}"></div>
                <div>{{item.name}}</div>
                <div>{{ ((item.value / orderTotal)*100).toFixed(2) }}%</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-middle">
        <div class="right-middle-item">
          <div class="label">开通服务点</div>
          <div class="value">{{ branchNum || '0' }}</div>
        </div>
        <div class="right-middle-item">
          <div class="label">服务项目</div>
          <div class="value">38</div>
        </div>
      </div>
      <div class="right-bottom boxBg">
        <p class="text-title-label" style="width: 570px;">预约工单数据</p>
        <div class="table">
          <scrolltable v-bind="tableConfig"></scrolltable>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import scrolltable from '@/views/Home4/components/scrollTablePart/index.vue'
import PieChart from '@/views/Home4/components/pieChart/index.vue'
import volunteerChart from '@/views/Home4/components/volunteerChart/index.vue'
import oldmanChart from '@/views/Home4/components/oldmanChart/index.vue'
import MapMain from '@/views/aplid/MapMain/index.vue'
import axios from "axios";

const serviceObj_consume = ref()
const totalPool = ref()
const branchNum = ref()
const registerNum = ref<any>({})
let xData = ref([])
let numData = ref([])
let chartKey = ref(0)
let chartKey1 = ref(0)
let chartKey2 = ref(0)
const dataX = ref([])
const dataY = ref([])
const orderType = ref()
const orderTotal = ref()

const status = {
  '助餐': '#05cff7',
  '助洁': '#b4f1fd',
  '助医': '#177bee',
  '助浴': '#fdbd00',
  '助急': '#73ffb5',
  '专业服务项目': '#ea9b6d',
}

const Request = async(url) => {
  const res = await axios.get(`${url}`,{withCredentials: false})
  return res.data
}

onMounted(()=>{
  Request('https://mzj.nanjing.gov.cn/nxyl/sjyh/api/timebank/jd_data/timeSum').then(res=>{ //服务对象累计消耗
    serviceObj_consume.value = res[0].num
  })
  Request('https://mzj.nanjing.gov.cn/nxyl/sjyh/api/timebank/jd_data/totalPool').then(res=>{ //市总池余额
    totalPool.value = res[0]

  })
  Request('https://mzj.nanjing.gov.cn/nxyl/sjyh/api/timebank/jd_data/registerNum').then(res=>{ //志愿者注册数、服务对象注册数、订单数
    registerNum.value = res[0]
  }) 
  Request('https://mzj.nanjing.gov.cn/nxyl/sjyh/api/timebank/jd_data/branchNum').then(res=>{ //开通服务点
    branchNum.value = res.num
  })
  Request('https://mzj.nanjing.gov.cn/nxyl/sjyh/api/timebank/jd_data/orderInfo').then(res=>{ //工单列表
    tableConfig.value.data = res.filter(item=>item.service_address)
  })
  Request('https://mzj.nanjing.gov.cn/nxyl/sjyh/api/timebank/jd_data/itemInfo').then(res=>{ //订单类型占比
    orderTotal.value = res.reduce((prev,next)=>{
      return prev + next.num
    },0)
    orderType.value = res.map(item=>({name: item.name,value: item.num}))
    chartKey2.value = Math.random()
  })
  Request('https://mzj.nanjing.gov.cn/nxyl/sjyh/api/timebank/jd_data/volunteerStatus').then(res=>{ //志愿者状态
    res.forEach(el=>{
      xData.value.push(el.x)
      numData.value.push(el.y)
    })
    chartKey.value = Math.random()
  })
  Request('https://mzj.nanjing.gov.cn/nxyl/sjyh/api/timebank/jd_data/oldmanType').then(res=>{ //服务对象分类
    res.forEach(el=>{
      dataX.value.push(el.x)
      dataY.value.push(el.y)
    })
    chartKey1.value = Math.random()
  })
})
  
let tableConfig = ref({
  height: "330px",
  borderColor: "#091928",
  headerStyle:{
    textAlgin:"center",
    backgroundColor:"#154da033",
    color:"#B0CCDD",
  },
  columnStyle:{
    backgroundColor:"rgba(22, 200, 255, 0.1)",
    height:"30px",
    color:"#fff",
    textAlgin:"center",
    borderTop: '5px solid #091928'
  },
  column:[
    {
      label:"预约上门日期",
      prop:"bespoke_time"
    },
    {
      label:"服务项目",
      prop:"item_name"
    },
    {
      label:"服务地址",
      prop:"service_address"
    },
    {
      label:"服务对象",
      prop:"oldman_name"
    },
    {
      label:"志愿者",
      prop:"user_name"
    },
    {
      label:"订单状态",
      prop:"status_name"
    }
  ],
  data: [],
})
</script>

<style scoped lang="scss">
.box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 870px;
  box-sizing: border-box;
  padding: 0 40px;
  .boxBg {
    padding: 18px 11px;
    background: linear-gradient(180.00deg, rgba(105, 197, 249, 0.05) 0%, rgba(53, 99, 125, 0.05) 100%);
  }
  .left {
    width: 270px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 252px;
    &-item {
      .title {
        font-family: "Microsoft YaHei";
        font-weight: 400;
        font-size: 27px;
      }
      .hour {
        margin-top: 18px;
        font-family: "MS PGothic";
        font-weight: 400;
        font-size: 42px;
        color: #16c8ff;
        text-shadow: 0 3px 6px #16c8ff54;
        span {
          font-family: "Microsoft YaHei";
          font-weight: 400;
          font-size: 21px;
          color: #fff;
          opacity: 0.5;
        }
      }
      
    }
  }
  .map {
    width: 600px;
    height: 100%;
    .mapTitle{
      font-family: "Microsoft YaHei";
      font-weight: 400;
      font-size: 21px;
      text-align: center;
      color: #16c8ff;
    }
  }
  .right {
    width: 1053px;
    height: 100%;
    &-top {
      display: flex;
      padding-left: 40px;
      justify-content: space-around;
    }
    .population {
      font-size: 22px;
      font-weight: 700;
      span {
        color: #35a3f4;
      }
    }
    .charts {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      gap: 11px;
      height: 336px;
      .volunteer {
        width: 428px;
      }
    }
    &-middle {
      display: flex;
      gap: 35px;
      height: 75px;
      &-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 257px;
        height: 100%;
        padding: 0 14px;
        background: rgba(34, 49, 65, 0.8);
        font-weight: 400;
        .label {
          padding-left: 11.5px;
          font-family: "Microsoft YaHei";
          font-size: 18px;
          position: relative;
          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 19px;
            background: #35a3f4;
          }
        }
        .value {
          font-family: "MS PGothic";
          font-size: 40px;
          color: #16c8ff;
          text-shadow: 0 3px 6px rgba(22, 200, 255, 0.33);
        }
      }
    }
    &-bottom {
      margin-top: 15px;
      height: 350px;
      .table {
        width: 95%;
        height: 300px;
        padding: 21px 0 0 23px;
      }
    }
  }
}
.flex1 {
  flex: 1;
}
.orderChart {
  display: flex;
  justify-content: center;
  position: relative;
  height: 100%;
  width: 100%;
  .text-content {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: #0000 url("@/assets/imgs/icon-hom1/icon-pie-bg.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    .text-label {
      margin-top: 10px;
      font-family: "PingFangSC-Regular ";
      font-weight: 400;
      font-size: 14px;
      color: #ffffffe6;
    }
    .text-value {
      font-family: "Franklin Gothic Medium";
      font-weight: 500;
      font-size: 18px;
      letter-spacing: 0.05px;
      color: #fff;
    }
  }
  .legend {
    position: absolute;
    bottom: 20px;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    &-item {
      font-size: 12px;
      padding: 3px 7px;
      width: 105px;
      height: 20px;
      background-color: #1d2e3a;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .flag {
      width: 13px;
      height: 4px;
    }
  }
}
.text-title-label {
  font-family: "Microsoft YaHei Bold";
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.1px;
  text-align: left;
  color: #fff;
  position: relative;
  height: 33.74px;
  line-height: 33.74px;
  padding-left: 36px;
  z-index: 0;
  &::after {
    content: "";
    width: 100%;
    height: 100%;
    background: url("@/assets/imgs/icon-big-label.webp") no-repeat;
    background-size: cover;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    
  }
}
</style>
